<template>
  <div class="checkbox-selector">
    <div 
      class="check-radio" 
      v-for="(number, index) in item.numbers" 
      :key="number.id"
      @click="handleClick"
    >
      <input type="checkbox" :value="index" :id="number.id" v-model="checkedData"/>
      <label :for='number.id' class="label">
        {{number.number}}
      </label>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 2,
          place: {
            context: '合数',
            position: 1
          },
          numbers: [
            {
              id: 1,
              number: '万',
              selected: false
            },
            {
              id: 2,
              number: '千',
              selected: false
            },
            {
              id: 3,
              number: '百',
              selected: false
            },
            {
              id: 4,
              number: '十',
              selected: false
            },
            {
              id: 5,
              number: '个',
              selected: false
            }
          ]
        }
      }
    },
    maxLength: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      checkedData: [0, 1]
    }
  },
  created() {
    
  },
  methods: {
    handleClick() {
      console.log(this.checkedData.length)
    },
    ...mapMutations('lottery', {
      setParameterType: 'SET_PARAMETER_TYPE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getParameterType']),
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    }
  },
  watch: {
    checkedData(newVal, oldVal) {
      if(newVal.length > 2) {
        newVal.shift()
        this.checkedData = newVal
      }
      this.clonedItem.numbers.forEach(item => {
        item.selected = false
      })
      newVal.forEach(value => {
        this.clonedItem.numbers[value].selected = true
      })
      this.$emit('click', this.clonedItem)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
.checkbox-selector 
  display flex
  justify-content flex-start
 .check-radio 
    position: relative
    height: 16px
    width 50px
    display flex 
    justify-content flex-start
    input 
      position: absolute
      left: 0px
      top: 0
      width: 16px
      height:16px
      opacity 0
    input[type='checkbox']
      &:checked 
        ~ .label:before
            border-color: $color-theme-red
    input[type='checkbox']
      &:checked 
        ~ .label:after
            background: $color-theme-red
    input[type='radio']
      &:checked 
        ~ .label:before
            border-color: $color-theme-red
    input[type='radio']
      &:checked 
        ~ .label:after
            background: $color-theme-red      
    label 
      position: absolute
      left 25px
      line-height: 16px
      top: 0px
      &.label:before 
        content: ''
        position: absolute
        left: -25px
        top: -0px
        display: inline-block
        width: 15px
        height: 15px
        border-radius: 50%
        border: 1px solid #ddd
        transition: all 0s ease
      &.label:after 
        content: ''
        position: absolute
        left: -22px
        top: 0px
        display: inline-block
        width: 11px
        height: 11px
        border-radius: 50%
        margin-top: 3px
        margin-left: 0px
        transition: all 0s ease
        
</style>